<div class="stock-fund-container">
  <f10></f10>
  <div id="fund-info-tab">
    <ul class="fa-tab" ctrl-tab>
      <li class="item active" data-href="#company_info">基本资料</li>
      <li class="item" data-href="#company_manager">高管介绍</li>
      <li class="item" data-href="#company_business">经营分析</li>
      <li class="item" data-href="#company_subcompany">参股控股公司</li>
      <li class="item" data-href="#company_holders">股本分析</li>
      <li class="item" data-href="#company_holders_top">十大股东</li>
      <li class="item" data-href="#company_financials">财务指标</li>
      <li class="item" data-href="#company_block_trading">大宗交易</li>
    </ul>
  </div>
  <div id="fund-info-content">
    <ul class="fa-main" company-chart>
      <li class="fa-item" id="company_info">
        <h4 class="title">基本资料</h4>
        <div class="content">
          <div class="ci-info">
            <div class="ci-avatar" [ngStyle]="{ 'background-image': 'url(' + company_info.pic_url + ')' }"></div>
            <div class="ci-detail">
              <div class="ci-detail-1 container-fluid">
                <div class="col-md-6">
                  <h3 class="ci-name" [innerHTML]="company_info.name"></h3>
                  <p class="txt"><span class="lab">所属地域</span>：<span [innerHTML]="company_info.region"></span></p>
                  <p class="txt"><span class="lab">所属行业</span>：{{company_info.industry}}</p>
                  <p class="txt"><span class="lab">公司网址</span>：{{company_info.website}}</p>
                </div>
                <div class="col-md-3">
                  <p class="txt"><span class="lab">董事长</span>：{{company_info.chair}}</p>
                  <p class="txt"><span class="lab">董秘</span>：{{company_info.secretary}}</p>
                  <p class="txt"><span class="lab">法人代表</span>：{{company_info.representative}}</p>
                  <p class="txt"><span class="lab">总经理</span>：{{company_info.manager}}</p>
                </div>
                <div class="col-md-3">
                  <p class="txt"><span class="lab">注册成本</span>：{{company_info.registered_capital}}</p>
                  <p class="txt"><span class="lab">员工数量</span>：{{company_info.staff}}</p>
                </div>
              </div>
              <div class="ci-detail-2">
                <p class="txt"><span class="lab">主营业务</span>：{{company_info.product_type}}</p>
                <p class="txt"><span class="lab">控股股东</span>：{{company_info.majority_shareholder}}</p>
              </div>
            </div>
          </div>
          <div class="intro" *ngIf="company_info.introduction">
            <p class="txt">公司简介：</p>
            <p class="txt">{{company_info.introduction || '暂无简介'}}</p>
          </div>
        </div>
      </li>
      <li class="fa-item" id="company_manager" name="company_manager">
        <h4 class="title">高管介绍</h4>
        <div class="content">
          <div class="module">
            <table class="fa-tb fix-width" show-detail>
              <!--<tr *ngFor-start="(type, managers) in company_manager">
                <td colspan="8" class="fix-td">
                  <h5 class="head">{{type}}（{{managers.length}}人）</h5>
                </td>
              </tr>-->
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>职务</th>
                <th>持股数</th>
                <th>序号</th>
                <th>姓名</th>
                <th>职务</th>
                <th>持股数</th>
              </tr>
              <tr *ngIf="managers.length===0">
                <td colspan="8">无</td>
              </tr>
              <!--<tr *ngFor="manager in managers" *ngIf="$even" *ngFor-end>
                <td>{{$index+1}}</td>
                <td><a class="fa-link" href="javascript:void(0);" (click)="setVar('selectedMan',manager)">{{manager.name}}</a></td>
                <td>{{manager.job}}</td>
                <td>{{manager.hold_shares}}</td>
                <td>{{$index+2}}</td>
                <td><a class="fa-link" href="javascript:void(0);" (click)="setVar('selectedMan',managers[$index+1])">{{managers[$index+1].name}}</a>
                </td>
                <td>{{managers[$index+1].job}}</td>
                <td>{{managers[$index+1].hold_shares}}</td>
              </tr>-->
            </table>
          </div>
        </div>
        <div id="manager_detail" class="modal fade fa-modal" tabindex="-1" role="dialog" aria-labelledby="managerDetailLabel" aria-hidden="false">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="fa-close" data-dismiss="modal" aria-label="Close">
              </div>
              <div class="fa-wrap">
                <div class="fa-row">
                  <div class="fa-col-2">
                    <p class="head txt">{{selectedMan.name}}</p>
                    <p class="txt">{{selectedMan.type}}</p>
                  </div>
                  <div class="fa-col-5">
                    <p class="txt">
                      <span class="fix-span-magin">持股数：{{selectedMan.hold_shares}}</span></p>
                    <p class="txt">职务：{{selectedMan.job}}</p>
                  </div>
                </div>
                <div class="fa-row">
                  <p class="txt intro">{{selectedMan.introduction}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="fa-item" id="company_business" name="company_business">
        <h4 class="title">经营分析</h4>
        <div class="content">
          <div class="module">
            <h5 class="head">主营介绍</h5>
            <p class="txt">主营业务：{{company_info.business}}</p>
            <p class="txt">产品类型：{{company_info.product_type}}</p>
            <p class="txt">产品名称：{{company_info.product}}</p>
          </div>
          <div class="module">
            <h5 class="head">经营范围</h5>
            <p class="txt">{{company_info.business_range}}</p>
          </div>
          <div class="module bt">
            <h5 class="head style1">主营构成分析</h5>
            <div class="opts">
              <div class="line">报告日期
                <select [(ngModel)]="statsDate" (onChange)="filterData(statsType, statsDate, 'date')" ng-options="date for date in statsDates | orderBy : toDate1 : true">
                                </select>
              </div>
              <div class="line">统计方式
                <select [(ngModel)]="statsType" (onChange)="filterData(statsType, statsDate, 'type')" ng-options="type for type in statsTypes">
                                </select>
              </div>
            </div>
            <div id="companyBusinessChart"></div>
            <table class="fa-tb">
              <thead>
                <tr>
                  <th class="t-left">业务名称</th>
                  <th>营业收入(万元)</th>
                  <th class="c-pointer" [ngClass]="{ active : statsOrder == '-income_rate'}" (click)="statsOrder = '-income_rate'">收入比例(%)<span class="fa-icon-order"></span></th>
                  <th>营业成本(万元)</th>
                  <th class="c-pointer" [ngClass]="{ active : statsOrder == '-cost_rate'}" (click)="statsOrder = '-cost_rate'">成本比例(%)<span class="fa-icon-order"></span></th>
                  <th class="c-pointer" [ngClass]="{ active : statsOrder == '-profit_rate'}" (click)="statsOrder = '-profit_rate'">利润比例(%)<span class="fa-icon-order"></span></th>
                </tr>
              </thead>
              <tbody>
                <tr *ngIf="statsData.length===0">
                  <td colspan="6">无</td>
                </tr>
                <tr *ngFor="let stats of statsData">
                  <!-- | orderBy : statsOrder"-->
                  <td class="t-left">{{stats.business}}</td>
                  <td>{{stats.income | number : 2}}</td>
                  <td>{{stats.income_rate | number: 2 }}</td>
                  <td>{{stats.cost || '0' | number : 2 }}</td>
                  <td>{{stats.cost_rate |number : 2}}</td>
                  <td>{{stats.profit_rate || '0' | number:2 }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </li>
      <li class="fa-item" id="company_subcompany">
        <h4 class="title">参股控股公司</h4>
        <div class="content">
          <table class="fa-tb mt20">
            <thead>
              <tr>
                <th>序号</th>
                <th>关联公司名称</th>
                <th>参控关系</th>
                <th>参控比例(%)</th>
                <th>投资金额(万元)</th>
                <th>被控公司净利润(万元)</th>
                <th>报表合并</th>
                <th>被参股公司主营业务</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="company_subcompany.length==0">
                <td colspan="8">无</td>
              </tr>
              <tr *ngFor="let c of company_subcompany">
                <!-- | orderBy : invest2Float : true | limitTo: 10 : (subcompanyPage-1)*10 "-->
                <td>{{ ($index+1) + (subcompanyPage-1)*10 }}</td>
                <td>{{c.subcompany}}</td>
                <td>{{c.relationship}}</td>
                <td>{{c.ratio}}</td>
                <td>{{c.invest | number : 2}}</td>
                <td>{{c.earning}}</td>
                <td>{{c.merge}}</td>
                <td>{{c.main_business}}</td>
              </tr>
            </tbody>
          </table>
          <nav class="fa-page" *ngIf="company_subcompany.length>10">
            <ul active-class>
              <li [ngClass]="{active :subcompanyPage == 1 }" (click)="subcompanyPage = 1" *ngIf="company_subcompany.length>10">1
              </li>
              <li *ngFor="let n of range(2, company_subcompany.length/10 > 5 ? 5:company_subcompany.length/10 ) " (click)="setVar('subcompanyPage', n)"
                [ngClass]="{active :subcompanyPage == n }">{{n}}
              </li>
            </ul>
          </nav>
        </div>
      </li>
      <li class="fa-item" id="company_holders">
        <h4 class="title">股本分析</h4>
        <div class="content">
          <table class="fa-tb mt20">
            <thead>
              <tr>
                <th>指标/日期</th>
                <th *ngFor="let h of company_holders">
                  <!--" | orderBy : toDate2 "-->
                  {{h.date}}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="company_holders.length==0">
                <td>暂无数据</td>
              </tr>
              <tr>
                <td>股东人数(万户)</td>
                <td *ngFor="let h of company_holders">
                  <!--"  | orderBy : toDate2  "-->
                  <span class="fix-margin">{{h.amount|| '0'}}</span>(<span class="{{ h.amount_change.includes('-') ? 'color-down': 'color-up'}} ">{{h.amount_change}}</span>)
                </td>
              </tr>
              <tr>
                <td>人均流通股(万股)</td>
                <td *ngFor="let h of company_holders">
                  <!--" | orderBy : toDate2  "-->
                  <span class="fix-margin">{{h.hold || '0' | number:2 }}</span>(<span class="{{ h.hold_change.includes('-') ? 'color-down': 'color-up'}}">{{h.hold_change}}</span>)
                </td>
              </tr>
            </tbody>
          </table>
          <div id="companyHoldersChart"></div>
        </div>
      </li>
      <li class="fa-item" id="company_holders_top">
        <h4 class="title">十大股东</h4>
        <div class="content">
          <div class="module style2 fix-mb">
            <div class="bd">
              <div class="opts">
                <div class="line">报告日期
                  <select [(ngModel)]="holdersTopDate[0]" ng-options="d for d in holdersTopDates[0] | orderBy : toDate1 : true" (onChange)="filterHolders(0)">
                                    </select>
                </div>
              </div>
              <div id="companyHoldersTopChart0"></div>
              <table class="fa-tb fix-width">
                <thead>
                  <tr>
                    <th>机构或基金名称</th>
                    <th>持有数量(万股)</th>
                    <th>持股变化(万股)</th>
                    <th>占流比例(%)</th>
                    <th>实际增减持(%)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngIf="company_holders_top[0].length==0">
                    <td colspan="5">无</td>
                  </tr>
                  <!--   | filter : { date : holdersTopDate } |  inHolders | orderBy : '-amount' | limitTo : 10  -->
                  <tr *ngFor="let c of company_holders_top[0]">
                    <td class="t-left">{{c.institute}}</td>
                    <td>{{c.amount | number :2}}</td>
                    <td class="{{ c.amount_change[0] ==='-' ? 'color-down' :(c.amount_change === '不变' ? '' :'color-up') }}">
                      {{c.amount_change}}
                    </td>
                    <td>{{c.ratio | number : 2}}</td>
                    <td class="{{c.ratio_change[0] ==='-' ? 'color-down' :(c.ratio_change === '不变' ? '' :'color-up')}}">
                      {{c.ratio_change}}
                    </td>
                  </tr>
                  <tr class="fix-tr">
                    <td colspan="5">较上期报告退出前十股东</td>
                  </tr>
                  <!--  filter: { date : holdersTopDate } |  outHolders | orderBy : '-amount'  -->
                  <tr *ngIf="company_holders_out[0].length==0">
                    <td colspan="5">无</td>
                  </tr>
                  <tr *ngFor="let c of company_holders_out[0]">
                    <td class="t-left">{{c.institute}}</td>
                    <td>{{c.amount | number :2}}</td>
                    <td class="color-down">{{c.amount_change}}</td>
                    <td>{{c.ratio | number : 2}}</td>
                    <td>{{c.ratio_change}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="module style2">
            <h5 class="head">十大流通股东</h5>
            <div class="bd">
              <div class="opts">
                <div class="line">报告日期
                  <select [(ngModel)]="holdersTopDate[1]" ng-options="d for d in holdersTopDates[1] | orderBy : toDate1 : true" (onChange)="filterHolders(1)">
                                    </select>
                </div>
              </div>
              <div id="companyHoldersTopChart1"></div>
              <table class="fa-tb fix-width">
                <thead>
                  <tr>
                    <th>机构或基金名称</th>
                    <th>持有数量(万股)</th>
                    <th>持股变化(万股)</th>
                    <th>占流通股比例(%)</th>
                    <th>实际增减持(%)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngIf="company_holders_top[1].length==0">
                    <td colspan="5">无</td>
                  </tr>
                  <!--   | filter : { date : holdersTopDate } |  inHolders | orderBy : '-amount' | limitTo : 10  -->
                  <tr *ngFor="let c of company_holders_top[1]">
                    <td class="t-left">{{c.institute}}</td>
                    <td>{{c.amount | number :2}}</td>
                    <td class="{{ c.amount_change[0] ==='-' ? 'color-down' :(c.amount_change === '不变' ? '' :'color-up') }}">
                      {{c.amount_change}}
                    </td>
                    <td>{{c.ratio | number : 2}}</td>
                    <td class="{{c.ratio_change[0] ==='-' ? 'color-down' :(c.ratio_change === '不变' ? '' :'color-up')}}">
                      {{c.ratio_change}}
                    </td>
                  </tr>
                  <tr class="fix-tr">
                    <td colspan="5">较上期报告退出前十流通股东</td>
                  </tr>
                  <!--  filter: { date : holdersTopDate } |  outHolders | orderBy : '-amount'  -->
                  <tr *ngIf="company_holders_out[1].length==0">
                    <td colspan="5">无</td>
                  </tr>
                  <tr *ngFor="let c of company_holders_out[1]">
                    <td class="t-left">{{c.institute}}</td>
                    <td>{{c.amount | number :2}}</td>
                    <td class="color-down">{{c.amount_change}}</td>
                    <td>{{c.ratio | number : 2}}</td>
                    <td>{{c.ratio_change}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </li>
      <li class="fa-item" id="company_financials">
        <h4 class="title">财务指标</h4>
        <div class="content">
          <div class="module">
            <table class="fa-tb mt20">
              <thead>
                <tr>
                  <th>截止日期</th>
                  <th>每股收益（元）</th>
                  <th>每股净资产（元）</th>
                  <th>营业收入</th>
                  <th>净利润</th>
                  <th>总资产</th>
                  <th>总债务</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngIf="company_financials.length==0">
                  <td colspan="7">无</td>
                </tr>
                <tr *ngFor="let f of company_financials">
                  <!--" | orderBy : toDate2 : true | limitTo : PAGEITEMS : (company_financials_page-1)*PAGEITEMS"-->
                  <td>{{f.date}}</td>
                  <td>{{f.EPS}}</td>
                  <td>{{f.asset_per_share}}</td>
                  <td>{{f.revenue}}</td>
                  <td>{{f.net_income}}</td>
                  <td>{{f.asset}}</td>
                  <td>{{f.debt}}</td>
                </tr>
              </tbody>
            </table>
            <nav class="fa-page" *ngIf="company_financials_pages>1">
              <ul>
                <li aria-label="Previous" [ngClass]="{'disable': company_financials_page <= 1}" (click)="company_financials_page > 1 && selectPage('company_financials', company_financials_page - 1)">&laquo;</li>
                <li *ngFor="let n of range(company_financials_page_st, company_financials_page_end) " (click)="selectPage('company_financials',n)"
                  [ngClass]="{'active': company_financials_page === n }">{{n}}
                </li>
                <li aria-label="Next" [ngClass]="{'disable': company_financials_page >=company_financials_pages }" (click)="company_financials_page < company_financials_pages && selectPage('company_financials', company_financials_page + 1)">&raquo;</li>
              </ul>
            </nav>
          </div>
          <div class="module style2">
            <div id="companyFinancialsChart"></div>
          </div>
          <div class="module style2">
            <h5 class="head">财务报表下载</h5>
            <table class="fa-tb fix-width">
              <thead>
                <tr>
                  <th>年度</th>
                  <th *ngFor="let s of finSeasons">{{s}}</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let y of reportYear">
                  <!--" | orderBy : toDate1 :true"-->
                  <td>{{y}}</td>
                  <td *ngFor="let s of finSeasons">
                    <a class="fa-link" target="_blank" href="{{company_financial_report[y][s]}}" *ngIf="company_financial_report[y][s]">下载</a>
                    <span *ngIf="!company_financial_report[y][s]">--</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </li>
      <li class="fa-item" id="company_block_trading">
        <h4 class="title">大宗交易</h4>
        <div class="content">
          <table class="fa-tb mt20 fix-width">
            <thead>
              <tr active-class>
                <th>序号</th>
                <th>交易日期</th>
                <th>成交价</th>
                <th>当日收盘价</th>
                <th>溢价率(%)</th>
                <th>成交量(万股)</th>
                <th>成交额(万)</th>
                <th>买方营业部</th>
                <th>卖方营业部</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="company_block_trading.length==0">
                <td colspan="9">无</td>
              </tr>
              <tr *ngFor="let t of company_block_trading">
                <!--" | orderBy : toDate2 : true | limitTo : PAGEITEMS : (company_block_trading_page-1) *10 "-->
                <td>{{$index+1 + (company_block_trading_page-1) *10 }}</td>
                <td class="fix-td-width">{{t.date}}</td>
                <td>{{t.trading_price}}</td>
                <td>{{t.price}}</td>
                <td class="{{ t.trading_price < t.price ? 'color-down': (t.trading_price == t.price) ? '': 'color-up' }}">
                  {{ ( (t.trading_price - t. price) / t.price )* 100 | number: 2}}
                </td>
                <td class="t-right">{{t.amount | number:2 }}</td>
                <td>{{t.balance | number : 2}}</td>
                <td>{{t.buyer}}</td>
                <td>{{t.seller}}</td>
              </tr>
            </tbody>
          </table>
          <nav class="fa-page" *ngIf="company_block_trading_pages>1">
            <ul>
              <li aria-label="Previous" [ngClass]="{'disable': company_block_trading_page <= 1}" (click)="company_block_trading_page > 1 && selectPage('company_block_trading', company_block_trading_page - 1)">&laquo;</li>
              <li *ngFor="let n of range(company_block_trading_page_st, company_block_trading_page_end)" (click)="selectPage('company_block_trading',n)"
                [ngClass]="{'active': company_block_trading_page === n }">{{n}}
              </li>
              <li aria-label="Next" [ngClass]="{'disable': company_block_trading_page >=company_block_trading_pages }" (click)="company_block_trading_page < company_block_trading_pages && selectPage('company_block_trading', company_block_trading_page + 1)">&raquo;</li>
            </ul>
          </nav>
        </div>
      </li>
    </ul>
  </div>
</div>